<template>
  <div class="madp-number-list">
    <div class="container">
      <div class="total">Ta添加的员工 ({{ employeeList.length }})</div>
      <div class="list">
        <!-- <el-empty v-if="list.length < 1" :image="require('@/assets/img/no-todo.png')" description="暂无邀请数据"></el-empty> -->
        <template>
          <div v-for="(item, idx) in employeeList" :key="idx" class="list-item">
            <img :src="item.avatar || $defaultAvatar" alt />
            <div class="info">
              <p class="name">{{ item.name }}</p>
              <p class="center"></p>
              <p>
                <span class="label">添加时间：</span>
                <span class="text">{{ item.createTime }}</span>
              </p>
            </div>
          </div>
        </template>
      </div>
    </div>
    <div class="container">
      <div class="total">Ta加入的群聊 ({{ roomList.length }})</div>
      <div class="list">
        <div class="empty" v-if="roomList.length < 1">该客户尚未加入任何群聊~~~</div>
        <template v-else>
          <div v-for="(item, idx) in roomList" :key="idx" class="list-item">
            <img class="madp-detail-chat-img" src="@/assets/img/avatar-room-default.jpg" alt />
            <div class="info">
              <p class="name">{{ item.roomName }} ({{ item.memberNum }})</p>
              <p class="center">
                <span class="label">群主：</span>
                <span class="text">{{ item.name }}</span>
              </p>
              <p>
                <span class="label">入群时间：</span>
                <span class="text">{{ item.joinTime }}</span>
              </p>
            </div>
          </div>
        </template>
      </div>
    </div>
    <back-btn />
  </div>
</template>
<script>
import backBtn from '@/components/back-btn.vue'
export default {
  name: 'customerInviteList',
  components: { backBtn },
  data() {
    return {
      employeeList: [],
      roomList: []
    }
  },
  props: {},
  created() {
    document.title = '好友和群聊'
    this.employeeList = this.$route.query.employeeList
    this.roomList = this.$route.query.roomList
  },
  methods: {}
}
</script>
<style scoped lang='scss'>
.madp-number-list {
  background: #fafafa;
  box-sizing: border-box;
  width: 100%;
  height: 100vh;
  overflow-y: scroll;
  .container {
    .total {
      font-size: 15px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(44, 44, 44, 0.8);
      padding: 12px 24px;
      background: #fff;
      box-shadow: 0px 1px 0px 0px rgba(44, 44, 44, 0.1);
    }
    .list {
      padding: 16px;
      padding-top: 10px;
      .empty {
        width: 100%;
        text-align: center;
        margin-top: 20px;
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(44, 44, 44, 0.8);
      }
    }
    .list-item {
      width: 100%;
      padding: 6px 16px;
      display: flex;
      align-items: center;
      background: #ffffff;
      box-shadow: 0px 3px 6px 0px rgba(181, 181, 181, 0.16);
      border-radius: 8px;
      margin-bottom: 10px;
      img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin-right: 10px;
      }
      .madp-detail-chat-img {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        margin-right: 11px;
      }
      .info {
        display: flex;
        flex-direction: column;
        justify-content: center;
        .name {
          font-size: 16px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #2c2c2c;
        }
        .center {
          margin: 5px 0;
        }
        .label {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(44, 44, 44, 0.5);
        }
        .text {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(44, 44, 44, 0.8);
        }
      }
    }
  }
}
</style>
